<template>
  <div>
    <!-- 派遣司机 2018/3/7 11:44 zhangQ -->
    <Transfer :data="driverListData"
              :target-keys="checkDriverList"
              :render-format="renderFormat"
              :list-style="{width:'340px',height: '450px'}"
              filterable
              @on-change="checkDriverHandleChange"
              :filter-method="driverListFilter">
      <div :style="{float: 'right', margin: '5px'}">
        <Button type="ghost" size="small" @click="resetData">重置</Button>
      </div>
    </Transfer>
    <div class="xlinkModal-footer">
      <Button type="primary" @click="subDriver">确认派遣</Button>
    </div>
  </div>
</template>

<script>
  import { dispatchDriver, getdriverlist } from '@api/backEnd/fleetControl'
  import tablePage from '@components/table/tablePage.vue'
  import _ from 'lodash'

  export default {
    name: 'dispatch-driver',
    data () {
      let driverColumn = [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'login_name'
        }
      ]
      let driverListData = []
      let checkDriverList = []
      let datas = { driverColumn, driverListData, checkDriverList }
      return datas
    },
    computed: {},
    props: {
      currentMainOrder: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    methods: {
      renderFormat (item) {
        return item.label + ' - ' + item.description
      },
      resetData () {
        this.checkDriverList = []
      },
      checkDriverHandleChange (newTargetKeys, direction, moveKeys) {
        this.checkDriverList = newTargetKeys
      },
      driverListFilter (data, txt) {
        let upTxt = txt.toUpperCase()
        let lowTxt = txt.toLowerCase()
        return (_.includes(data.row['login_name'], upTxt) || _.includes(data.row['login_name'], lowTxt)) || (_.includes(data.row['truck_no'], upTxt) || _.includes(data.row['truck_no'], lowTxt)) ||
          (_.includes(data.row['login_namePy'], upTxt) || _.includes(data.row['login_namePy'], lowTxt))
      },
      subDriver (status) {
        if (!(this.checkDriverList && this.checkDriverList.length > 0)) {
          this.$Message.error('请选择司机')
          return
        }
        let driverArrStr = JSON.stringify(this.checkDriverList)
        dispatchDriver({
          loginNames: driverArrStr,
          mainOrderNo: this.currentMainOrder.orderNo
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            this.$Message.info('派遣成功')
            this.$emit('close')
          } else {
            this.$Message.info(res.data.res)
          }
        })
      },
      getDriverList () {
        getdriverlist({
          page: 1,
          pageSize: 500
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            let resData = res.data
            let driverListData = []
            resData.data.list.forEach((item) => {
              driverListData.push({
                key: item.login_name,
                label: item.login_name,
                description: item.truck_no,
                row: item
              })
            })
            this.driverListData = driverListData
          } else {
            console.log(res.data.res)
          }
        })
      }
    },
    mounted () {
      this.getDriverList()
    },
    components: { tablePage }
  }
</script>

<style scoped>

</style>
